<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布商品</title>
    <!-- jquery -->
    <script src="../js/jquery.min.js"></script>
    <!-- bootstrap -->
    <script src="../js/bootstrap3/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../js/bootstrap3/css/bootstrap.css"/>
    <!-- bootstrap table -->
    <script src="../js/bootstrap-table/bootstrap-table.js"></script>
    <link rel="../js/bootstrap-table/bootstrap-table.css"/>
    <script src="../js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <!-- bootstrap 时间 -->
    <script src="../js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script src="../js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <link rel="stylesheet" href="../js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
    <!-- bootstrap 弹框 -->
    <script src="../js/bootstrap-bootbox/bootbox.js"></script>
    <!-- 图片上传 -->
    <script src="../js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="../js/bootstrap-fileinput/js/locales/zh.js"></script>
    <link rel="stylesheet" href="../js/bootstrap-fileinput/css/fileinput.css">
</head>
<body>
<div class="container-fluid">
    <form class="form-horizontal" id="productForm">
        <div class="form-group">
            <label for="productName" class="col-sm-2 control-label">商品名称</label>
            <div class="col-sm-4">
                <input type="text"  class="form-control" id="productName" name="productName">
            </div>
            <label for="typeId" class="col-sm-2 control-label">商品类型</label>
            <div class="col-sm-4">
                <select class="form-control" id="typeId" name="typeId"></select>
            </div>
        </div>
        <div class="form-group">
            <label for="productColor" class="col-sm-2 control-label">商品颜色</label>
            <div class="col-sm-4">
                <input type="text"  class="form-control" id="productColor" name="productColor">
            </div>
            <label for="productPrice" class="col-sm-2 control-label">商品价格</label>
            <div class="col-sm-4">
                <input  class="form-control" id="productPrice" name="productPrice">
            </div>
        </div>
       <div class="form-group">
            <label for="productStockId" class="col-sm-2 control-label">数量</label>
            <div class="col-sm-4">
                <select type="text" class="form-control" id="productStockId" name="productStockId"></select>
            </div>
        </div>
        <div class="form-group">
            <label for="productImg" class="col-sm-2 control-label">商品图片</label>
            <div class="col-sm-10">
                <input type="file" multiple class="projectfile" accept="image/*" name="imgfile" id="productImg">
                <input type="text" id="hadeimg" name="productImg" >
            </div>
        </div>
        <div class="form-group">
            <div style="float: right;">
                <button onclick="addProduct()" type="button" class="btn btn-info ">提交</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    //初始化
    $(function(){
        initProductType();
        //intitStore();
        intitStock()
    })

    //发布商品：加载商品类型
    function initProductType(){
        $.post('../product/findProductType',{},function(data){
            var result = "<option value='-1'>请选择</option>"
            for (var i = 0; i < data.length; i++) {
                result += '<option value="'+data[i].typeId+'">'+data[i].typeName+'</option>';
            }
            $("#typeId").html(result);
        })
    }

    //发布商品：加载库存
    function intitStock() {
        $.post('../product/findStock', {}, function (data) {
            var result = "<option value='-1'>请选择</option>"
            for (var i = 0; i < data.length; i++) {
                result += '<option value="' + data[i].id + '">' + data[i].stockNumber + '</option>';
            }
            $("#productStockId").html(result);
        })

/*
        //发布商品：加载店铺
        function intitStore() {
            $.post('../product/findStore', {}, function (data) {
                var result = "<option value='-1'>请选择</option>"
                for (var i = 0; i < data.length; i++) {
                    result += '<option value="' + data[i].id + '">' + data[i].storeName + '</option>';
                }
                $("#storeId").html(result);
            })
        }*/

        //新增图片JS
        $('#productImg').fileinput({
            language: 'zh', //设置语言
            uploadUrl: '../product/upload', //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            //dropZoneEnabled: false,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount: 1, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data',
            validateInitialCount: true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        }).on('fileuploaded', function (event, data, previewId, index) {
            var imgval = data.response.img;
            //隐藏图片ID
            $('#hadeimg').val(imgval);
        });
    }

    function addProduct(){
        $.ajax({
            url:"../product/addProduct",
            type:"post",
            data:$("#productForm").serialize(),
            success:function(data){
                if(data){
                   location.href="../page/toProductList";
                }else{
                    bootbox.alert({
                        message:'保存失败',
                        size:'small'
                    })
                }
            }
        })
    }
</script>
</body>
</html>